<template>
  <div class="swiper">
    <el-carousel :interval="5000" arrow="always" style="height: 360px">
      <el-carousel-item v-for="item in swiperList" :key="item.videoId" style="height: 360px">
<!--        width="530" height="300"-->
        <el-image @click="toDetail(item.videoId)" :src="item.videoCover" fit="cover" style="width:530px;height: 300px;cursor: pointer;"></el-image>
<!--        <el-text class="w-150px mb-2" truncated>-->
<!--          {{ item.desc }}-->
<!--        </el-text>-->
        <div class="desc" @click="toDetail(item.videoId)">{{item.videoTitle}}</div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {getHotVideos} from "@/api/api.js";
import {useRouter} from "vue-router";

const swiperList1 = ref([
  {
    id:1,
    imgUrl:"/img/swiperImg.png",
    desc:"巡航速度不错的哈·"
  },
  {
    id:2,
    imgUrl:"/img/swiperImg.png",
    desc:"巡航速度不错的哈"
  },
  {
    id:3,
    imgUrl:"/img/swiperImg.png",
    desc:"巡航速度不错的哈"
  },
  {
    id:4,
    imgUrl:"/img/swiperImg.png",
    desc:"巡航速度不错的哈"
  },
  {
    id:5,
    imgUrl:"/img/swiperImg.png",
    desc:"巡航速度不错的哈"
  },
])

const swiperList = ref([
  {
    videoId:0,
    videoCover:'',
    videoTitle:''
  }
])

onMounted( async ()=>{
  const res = await getHotVideos();
  console.log(res)
  swiperList.value = res.data
})

const router = useRouter()
const toDetail = (videoId) => {
  // router.push({
  //   name:'video',
  //   params:{
  //     videoId
  //   }
  // })
  window.open(`/video/${videoId}`)
}

</script>
<style scoped>
.swiper{
  width: 530px;
  height: 360px;
  border-radius: 10px;
  overflow: hidden;
  box-sizing: border-box;
}
.desc{
  cursor: pointer;
  width: 530px;
  height: 100px;
  line-height: 50px;
  font-size: 20px;
  color: white;
  background-color: #3f3f3f;
  text-align: left;
  text-indent: 20px;
  position: relative;
  top: -10px;
}
</style>